import dayjs from 'dayjs'
const app = getApp();
Component({
    /**  
     * 组件的属性列表  
     */
    properties: {},

    /**  
     * 组件的初始数据  
     */
    data: {
        staticPrefix: app.globalData.STATIC_PREFIX,
        currentDate: new Date(), // 当前选择的时间  
        filterType: 'day', // 当前筛选类型：'day' | 'week' | 'month'  
        displayDate: '', // 显示的时间字符串
        range_options: ['日', '周', '月'],
        currentIndex: 0,
        tabWidth: 0,
    },

    /**  
     * 组件的方法列表  
     */
    methods: {
        // 更新显示的时间  
        updateDisplayDate() {
            const currentDate = new Date(this.data.currentDate); // 确保 currentDate 是 Date 对象  
            const {
                filterType
            } = this.data;

            let displayDate = '';
            let startDate, endDate;

            if (filterType === 'day') {
                // 单天  
                displayDate = currentDate.toISOString().split('T')[0];
                startDate = currentDate.toISOString().split('T')[0];
                endDate = null;
            } else if (filterType === 'week') {
                // 当前周的周一和周日  
                const weekStart = new Date(currentDate);
                const weekEnd = new Date(currentDate);
                weekStart.setDate(currentDate.getDate() - currentDate.getDay() + 1); // 周一  
                weekEnd.setDate(currentDate.getDate() - currentDate.getDay() + 7); // 周日  
                displayDate = `${weekStart.toISOString().split('T')[0]} 至 ${weekEnd.toISOString().split('T')[0]}`;
                startDate = weekStart.toISOString().split('T')[0];
                endDate = weekEnd.toISOString().split('T')[0];
            } else if (filterType === 'month') {
                // 当前月的1号和最后一天，需要确保跨月的问题  
                const monthStart = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1); // 月初  
                const monthEnd = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0); // 月末  
                displayDate = `${dayjs(monthStart).format('YYYY-MM-DD')} 至 ${dayjs(monthEnd).format('YYYY-MM-DD')}`;
                startDate = dayjs(monthStart).format('YYYY-MM-DD');
                endDate = dayjs(monthEnd).format('YYYY-MM-DD');
            }

            this.setData({
                displayDate
            });

            // 触发事件，将当前日期范围暴露给父组件  
            this.triggerEvent('dateChange', {
                filterType,
                startDate,
                endDate
            });
        },

        // 切换筛选类型  
        onFilterTypeChange(e) {
            const filterType = e.currentTarget.dataset.type; // 获取点击的类型  
            const index = e.currentTarget.dataset.index; // 获取当前索引值
            this.setData({
                filterType,
                currentIndex: index
            }, () => {
                this.updateDisplayDate(); // 更新显示时间  
            });
        },

        // 前进按钮  
        onNext() {
            const currentDate = new Date(this.data.currentDate); // 确保 currentDate 是 Date 对象  
            const {
                filterType
            } = this.data;

            if (filterType === 'day') {
                currentDate.setDate(currentDate.getDate() + 1);
            } else if (filterType === 'week') {
                currentDate.setDate(currentDate.getDate() + 7);
            } else if (filterType === 'month') {
                currentDate.setMonth(currentDate.getMonth() + 1); // 调整到下一个月  
            }

            this.setData({
                currentDate
            }, () => {
                this.updateDisplayDate(); // 更新显示时间  
            });
        },

        // 后退按钮  
        onPrev() {
            const currentDate = new Date(this.data.currentDate); // 确保 currentDate 是 Date 对象  
            const {
                filterType
            } = this.data;

            if (filterType === 'day') {
                currentDate.setDate(currentDate.getDate() - 1);
            } else if (filterType === 'week') {
                currentDate.setDate(currentDate.getDate() - 7);
            } else if (filterType === 'month') {
                currentDate.setMonth(currentDate.getMonth() - 1); // 调整到上一个月  
            }

            this.setData({
                currentDate
            }, () => {
                this.updateDisplayDate(); // 更新显示时间  
            });
        }
    },

    /**  
     * 组件的生命周期  
     */
    lifetimes: {
        attached() {
            const that = this;
            this.createSelectorQuery().select('.tab_box').boundingClientRect(function (rect) {
                that.setData({
                    tabWidth: ((rect.width - 8) / 3).toFixed(2),
                    currentDate: new Date()
                }, () => {
                    that.updateDisplayDate(); // 初始化显示时间  
                })
            }).exec()

        }
    }
});